<template>
  <view class="main-box">
    <view class="top">
      <view class="left">
         <uni-data-picker placeholder="请选择地址" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code" @change="onchange" v-model="value"/>
      </view>
      <input class="input" type="text" placeholder="搜索地址" v-model="key" />
      <scroll-view scroll-y class="search-result" v-show="show" >
        <view class="result-box">
          <view class="result-item" v-for="(item,index) in searchList" :key="index" @click="chooseSearchHandler(item)">
            <text>{{item.title}}</text>
            <text>{{item.address}}</text>
          </view>
        </view>
        
      </scroll-view>
    </view>
    <view class="map-box">
      <map style="width: 750rpx; height: 400px;" 
      :latitude="latitude" 
      :longitude="longitude" 
      :markers="covers"
      show-compass
      show-location
      @poitap="poitapHandler"/>
      		
    </view>
    <scroll-view class="buttom" scroll-y>
      <my-addr v-for="(item,index) in aroundList" :title="item.title" :desc="item.address" :key="index"></my-addr>
    </scroll-view>
  </view>
</template>

<script>
import mpMixin from 'uview-ui/libs/mixin/mpMixin';
import mapApi from "@/apis/mapApi.js"
  export default {
    data() {
      return {
        searchList:[],
        //是否展示搜索结果
        show:false,
        //附近地点集合
        aroundList:[],
        id:0, // 使用 marker点击事件 需要填写id
        // title: 'map',
        latitude: 28.810081,
        longitude: 104.673445,
        //标注的地标
        covers: [],
        //搜索关键字
        key:'',
        //城市的code
        value:"",
        //定时器的ID
        timeId:""
      };
    },
    watch:{
      key(val){
      clearTimeout(this.timeId)
      this.timeId = setTimeout(()=>{
        if(val!==''){
           this.search()
           
        }else{
          this.show = false
        }
        
        },1000)
      }
    },
    methods:{
      //点击搜索出来的子项时
     async chooseSearchHandler(item){
        this.show = false
         this.covers = []
        this.latitude = item.location.lat
        this.longitude = item.location.lng
        const map = uniCloud.importObject("map")
        const {result:res} = await map.getAroundInfo(item.location.lat,item.location.lng)
        let mapInfo = {
          id:this.id++,
          title:item.title,
          latitude: item.location.lat,
          longitude: item.location.lng,
          iconPath: '../../static/map/位置.png',
          width:40,
          height:40
        }
        this.aroundList = res.pois
        this.covers.push(mapInfo)
      },
      //输入框的搜索功能
      async search(){
        const map = uniCloud.importObject("map")
        const city = await map.getCityByCode(this.value)
       const r = await map.inputPromp(this.key,city)
       // console.log(r);
       this.searchList = r.result.data
       this.show = true
      },
      //点击地图上的坐标时的触发
     async poitapHandler(e){
        this.covers = []
        let mapInfo = {
          id:this.id++,
          title:e.detail.name,
          latitude: e.detail.latitude,
          longitude: e.detail.longitude,
          iconPath: '../../static/map/位置.png',
          width:40,
          height:40
        }
        this.covers.push(mapInfo)
        const map = uniCloud.importObject("map")
        const {result:res} = await map.getAroundInfo(e.detail.latitude,e.detail.longitude)
        const {data:r} = await map.getCityByName(res.district)
          this.aroundList = res.pois
          this.value = r[0].code
        // console.log(e);
      },
      //地址选择完成时
     async onchange(e){
       this.covers = []
      const key = e.detail.value[0].text+e.detail.value[1].text+e.detail.value[2].text
        const map = uniCloud.importObject("map")
       
        const {data:res} = await mapApi.getAddressLocation(key)
        // console.log(res);
        const {result:r} = await map.getAroundInfo(res.result.location.lat,res.result.location.lng)
        this.latitude = res.result.location.lat
        this.longitude = res.result.location.lng
        let mapInfo = {
          id:this.id++,
          title:res.result.title,
          latitude: res.result.location.lat,
          longitude: res.result.location.lng,
          iconPath: '../../static/map/位置.png',
          width:40,
          height:40
        }
        this.covers.push(mapInfo)
        this.aroundList = r.pois
        // console.log("e"+e);
      },
   
      //让用户授权
        getAuthorize(){
          let that = this
          uni.authorize({
            scope:'scope.userLocation',
            success() {
            that.getLocationInfo()
            }
          })
        },
        //获取当前位置
        getLocationInfo(){
          let that = this
          uni.getLocation({
            type: 'gcj02',
            altitude:true,
            isHighAccuracy:true,
            success(res) {
              that.latitude = res.latitude
              that.longitude = res.longitude
            }
          })
        },
        //获取当前坐标及周围坐标信息
       async getAroundInfo(){
         const map = uniCloud.importObject("map")
        const {result:res} = await map.getAroundInfo(this.latitude,this.longitude)
        const {data:r} = await map.getCityByName(res.district)
          this.aroundList = res.pois
          this.value = r[0].code
        }
    },
   async created() {
      this.getAuthorize()
      this.getAroundInfo()
    }
  }
</script>

<style lang="scss" scoped>
.main-box{
  display: flex;
  flex-direction: column;
  .top{
    padding: 10rpx 0;
    height: 60rpx;
    display: flex;
    align-items: center;
    .left{
      width: 200rpx;
    }
    .input{
      width: 500rpx;
      position: relative;
      border: 1px #000 solid;
      padding: 10rpx;
    }
    .search-result{
      background-color: #fff;
      border: 1px #000 solid;
      position: absolute;
      left: 200rpx;
      width: 520rpx;
      top:80rpx;
      height: 400rpx;
      z-index: 200;
      .result-box{
        display: flex;
        flex-direction: column;
        .result-item{
          padding: 10rpx;
          height: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          
          text:nth-child(1){
            font-size: 17px;
            overflow: hidden;
            padding-bottom: 8rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          text:nth-child(2){
            padding-bottom: 5rpx;
            font-size: 13px;
               color:#b6b6b6;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    
    }
  }
  .map-box{
  }
  .buttom{
    height: 670rpx;
    display: flex;
    flex-direction: column;
  }
}
</style>
